<script setup lang='ts' name="protocol-management">
import type { VxePagerEvents, VxeTableInstance } from 'vxe-table'

import { useDeleteBankAccount, useGetJcEnterpriseBankAccountPage } from '@fl/api/supplier'
import { SearchForm, SearchTable } from '@fl/components'
import { cloneDeep } from 'lodash-es'

import AddOrEdit from './add-or-edit.vue'
import { useForm } from './hooks/use-form'
import { useTable } from './hooks/use-table'

const { gridOptions } = useTable()

const { form, schema, state } = useForm()

const { isPending: deletePending, mutate: deleteMutate } = useDeleteBankAccount()

const params = computed(() => {
    return {
        accountName: form.value.accountName,
        accountNumber: form.value.accountNumber,
        bankName: form.value.bankName,
        page: gridOptions.pagerConfig.currentPage,
        size: gridOptions.pagerConfig.pageSize,
    }
})

const id = ref<null | string>(null)

const visible = ref<boolean>(false)

const { data, isLoading } = useGetJcEnterpriseBankAccountPage(params)

const loading = computed(() => isLoading.value || deletePending.value)

const tableRef = ref<VxeTableInstance<any>>()

function deleteDate(row: any) {
    deleteMutate(row.id, {
        onSuccess: () => {
            ElMessage.success('操作成功')
        },
    })
}

const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    gridOptions.pagerConfig.currentPage = currentPage
    gridOptions.pagerConfig.pageSize = pageSize
}

function addData() {
    visible.value = true
}

function editData(row: any) {
    id.value = row.id
    visible.value = true
}

function submit(val: any) {
    gridOptions.pagerConfig.currentPage = 1
    form.value = cloneDeep(val)
}

function reset() {
    form.value = cloneDeep(state)
    gridOptions.pagerConfig.currentPage = 1
}

watchEffect(() => {
    if (data.value) {
        console.log(data.value)
        gridOptions.pagerConfig.total = data.value?.total ?? 0
    }
})
</script>

<template>
    <ElCard mb-20>
        <SearchForm v-bind="form"
                    :columns="schema"
                    submit-text="查询"
                    @submit="submit"
                    @reset="reset"
        />
    </ElCard>

    <ElCard>
        <SearchTable v-bind="gridOptions"
                     ref="tableRef"
                     v-model:pager="gridOptions.pagerConfig"
                     :data="data?.records"
                     :loading="loading"
                     @page-change="handlePageChange"
        >
            <template #toolbar_buttons>
                <el-space>
                    <el-button type="primary"
                               @click="addData"
                    >
                        <div class="i-ic:baseline-add size-16" />
                        新增
                    </el-button>
                </el-space>
            </template>

            <template #operate="{ row }">
                <div class="flex gap-15 justify-center">
                    <span class="text-#da0004 cursor-pointer"
                          @click="editData(row)"
                    >编辑</span>

                    <span class="cursor-pointer"
                          @click="deleteDate(row)"
                    >删除</span>
                </div>
            </template>

            <template #accountNumber="{ row }">
                <div class="flex gap-10 justify-center items-center">
                    <span>
                        {{ row.accountNumber }}
                    </span>

                    <el-tag v-if="row?.isDefaultCard === '1'"
                            type="warning"
                    >
                        主要收款账户
                    </el-tag>
                </div>
            </template>
        </SearchTable>
    </ElCard>

    <AddOrEdit :key="id"
               v-model:id="id"
               v-model:visible="visible"
    />
</template>
